<template>
	<view class="login_box">
		<u-loading-page :loading="loadding" loading-mode="semicircle" loading-text="欢迎进入风动社区"></u-loading-page>
		<view v-if="!loadding && openid != '' && openid != undefined" class="main">
			<view class="login_logo">
				<image class="login_img" src="../../static/app.png" mode=""></image>
			</view>
			<view v-if="!is_bind" class="input_box">
				<input type="text" placeholder="请输入设备编号" disabled placeholder-style="color:#bebfc3"
					v-model="equipment_number">
				<u-line></u-line>
				<input type="text" placeholder="请输入商家名称" placeholder-style="color:#bebfc3" v-model="merchant_name">
				<u-line></u-line>
				<input type="number" placeholder="请输入商家手机号" placeholder-style="color:#bebfc3" v-model="phone">
				<u-line></u-line>
				<!-- <input type="text" placeholder="请选择地区" disabled @click="district" placeholder-style="color:#bebfc3"
					v-model="districts"> -->
				<view class="input_tag" :class="districts != '' ? 'blacks' : ''" @click="district">
					<text>{{districts != '' ? districts : '请选择地区'}}</text>
				</view>
				<u-line></u-line>
				<input type="text" placeholder="请输入详情地址" placeholder-style="color:#bebfc3" v-model="address">
			</view>
			<view v-if="!is_bind" class="certificate">
				<view class="title">
					身份证件上传
				</view>
				<view class="idcard">
					<view class="lefts">
						<u-upload :fileList="positive" @afterRead="_positive" @delete="delete_positive" name="1"
							imageMode="aspectFit" :maxCount="1" width="135" height="82">
							<u--image :showLoading="true" src="../../static/idcard-2.jpg" width="135px"
								height="82px"></u--image>
						</u-upload>
					</view>
					<view class="rights">
						<u-upload :fileList="reverse" @afterRead="_reverse" @delete="delete_reverse" name="2"
							imageMode="aspectFit" :maxCount="1" width="135" height="82">
							<u--image :showLoading="true" src="../../static/idcard-1.jpg" width="135px"
								height="82px"></u--image>
						</u-upload>
					</view>
				</view>
				<view class="msgs">
					点击示例图上传
				</view>
			</view>
			<view v-if="!is_bind" class="certificate">
				<view class="title">
					营业执照上传
				</view>
				<view class="idcards">
					<u-upload :fileList="license" @afterRead="_license" @delete="delete_license" name="3"
						imageMode="aspectFit" :maxCount="1" width="135" height="82">
						<u--image :showLoading="true" src="../../static/business_license.jpg" width="305px"
							height="183px"></u--image>
					</u-upload>
				</view>
				<view class="msgs">
					点击示例图上传
				</view>
			</view>
			<view v-if="is_bind" class="input_box">
				<input type="text" disabled placeholder-style="color:#bebfc3" v-model="merchant_name">
				<u-line></u-line>
				<input type="text" placeholder="请输入姓名" placeholder-style="color:#bebfc3" v-model="name">
				<u-line></u-line>
				<input type="number" placeholder="请输入手机号" placeholder-style="color:#bebfc3" v-model="phone">
				<u-line></u-line>
				<view class="input_tag" :class="districts != '' ? 'blacks' : ''" @click="district">
					<text>{{districts != '' ? districts : '请选择地区'}}</text>
				</view>
				<u-line></u-line>
				<input type="text" placeholder="请输入详情地址" placeholder-style="color:#bebfc3" v-model="address">
				<!-- <u-line></u-line>
				<view class="input_tag" :class="product_name != '' ? 'blacks' : ''" @click="product_click">
					<text>{{product_name != '' ? product_name : '请选择产品'}}</text>
				</view>
				<u-picker :show="pro_show" ref="uPicker" :columns="pro_columns" keyName="name" closeOnClickOverlay
					@confirm="changeProduct" @cancel="pro_show = false" @close="pro_show = false"></u-picker> -->
				<u-line></u-line>
				<!-- <view class="input_tag" :class="type_name != '' ? 'blacks' : ''" @click="type_click">
					<text>{{type_name != '' ? type_name : '请选择邮寄方式'}}</text>
				</view> -->
				<u-picker :show="type_show" ref="uPicker" :columns="type_columns" keyName="name" closeOnClickOverlay
					@confirm="changeType" @cancel="type_show = false" @close="type_show = false"></u-picker>
				<u-line v-if="referrer != '请输入推荐人'"></u-line>
				<input type="text" v-if="referrer != '请输入推荐人'" disabled :placeholder="referrer"
					placeholder-style="color:#bebfc3">
			</view>
			<view class="label">
				<checkbox-group @change="radioChange">
					<checkbox value="checked" :checked="checked" style="transform:scale(0.7)" />请阅读同意
					<text @click="agreementClick(1)">《{{agreement}}》</text>
					<text v-if="user_types == 1" @click="agreementClick(2)">《隐私协议》</text>
					<text v-if="user_types == 1" @click="agreementClick(3)">《用户协议》</text>
				</checkbox-group>
			</view>
			<view class="login_button" v-if="checked" @click="register5">
				{{btn_msg}}
			</view>
			<view class="login_button" style="background-color: #a0cfff;" v-else>
				{{btn_msg}}
			</view>
			<u-picker :show="addressShow" ref="uPicker" :columns="cityList" @confirm="confirm" @change="changeHandler"
				@cancel="addressShow = false"></u-picker>
			<u-modal :show="success_show" :title="title" :content='content' @confirm="successConfirm"></u-modal>
			<u-overlay :show="show" @click="show = false">
				<view class="Modal" v-show="show" :class="show? 'visible' :''">
					<view class="Modal_tit">
						<h3>{{agreement_title}}</h3>
						<p v-html="agreement_content"></p>
					</view>
					<view class="Modal_cf" @click="contract">同意</view>
				</view>
			</u-overlay>
		</view>
	</view>
</template>

<script>
	var util = require('@/util/request5.js');
	import cityData from '@/static/js/city.js'
	import screen from '@/component/screen.vue'
	import {
		pathToBase64,
		base64ToPath
	} from '@/js_sdk/mmmm-image-tools/index.js'
	export default {
		data() {
			return {
				loadding: true,
				show: false,
				addressShow: false,
				pro_show: false,
				type_show: false,
				success_show: false,
				title: '申领信息提交成功',
				content: '请关注【风动社区】公众号，方便您后期售后服务！',
				openid: '',
				userid: '',
				equipment_number: 'MTX0401599',
				merchant_id: '',
				merchant_name: '',
				referrer: '请输入推荐人', //推荐人
				phone: '', //手机号
				address: '',
				name: '',
				districts: '',
				product_id: 0,
				product_name: '',
				type: 2,
				type_name: '',
				pro_columns: [],
				btn_msg: '注册',
				type_columns: [],
				show: false,
				checked: false, //合同是否选中
				e: {},
				regis: {},
				version: '5.0',
				is_bind: false,
				cityList: [],
				cityLevel1: [],
				cityLevel2: [],
				cityLevel3: [],
				data: {
					province: '',
					city: '',
					district: '',
					address: ''
				},
				user_types: 1,
				agreement: '免费领取协议',
				agreement_title: '',
				agreement_content: '',
				positive: [],
				positive_file: '',
				reverse: [],
				reverse_file: '',
				license: [],
				license_file: '',
				nmb: 0,
				real_name: '',
				real_idcard: '',
			}
		},
		components: {
			screen
		},
		onLoad(e) {
			this.getIpData()
			this.openid = uni.getStorageSync('openid');
			this.e = e
			if (this.e.enumber) {
				this.equipment_number = this.e.enumber
				uni.setStorageSync('equipment_number', this.e.enumber);
			} else {
				uni.setStorageSync('equipment_number', this.equipment_number);
			}
			if (this.e.userid) {
				this.userid = this.e.userid
			}
			if (this.openid == '' || this.openid == undefined) {
				if (e.code) {
					this.getWxOpenId(e.code)
				} else {
					this.getWxConfigInfo(e.code)
				}
			}
			this.initCityData()
			this.detectionEquipmentBind()
		},
		onShow() {
			let that = this
			uni.$on('show', function(data) {
				that.checked = data
			})
		},
		methods: {
			// 访问记录
			async getIpData() {
				const {
					data: res
				} = await this.$myHttp5({
					url: 'Logs/access',
					data: {
						equipment_number: this.equipment_number
					}
				});
			},
			// 检测设备是否绑定
			async detectionEquipmentBind() {
				uni.showLoading({
					title: '加载中'
				});
				const {
					data: res
				} = await this.$myHttp5({
					url: 'Register/check_machine',
					data: {
						mcode: this.equipment_number
					}
				});
				if (res.code == 1) {
					this.user_types = 1
					this.merchant_id = res.data.id
					this.merchant_name = res.data.nick
					this.is_bind = true
					this._loginpwd5()
					this.getProduct()
					this.btn_msg = '免费申领'
					this.agreement = "免费领取协议"
				} else {
					this.user_types = 2
					uni.hideLoading()
					this.loadding = false
					uni.setNavigationBarTitle({
						title: '商户绑定'
					})
					this.agreement = "合作协议书"
				}
				this._getAgree5()
			},
			// 打开合同
			agreementClick(types) {
				if (this.user_types == 2) {
					this.agreement_title = this.agreement
					this.agreement_content = this.regis.cooperation.content
				} else {
					if (types == 1) {
						this.agreement_title = "免费领取协议"
						this.agreement_content = this.regis.gets.content
					} else if (types == 2) {
						this.agreement_title = "隐私协议"
						this.agreement_content = this.regis.privacy.content
					} else if (types == 3) {
						this.agreement_title = "用户协议"
						this.agreement_content = this.regis.user.content
					}
				}
				this.show = true
			},
			// 签订合同
			radioChange(e) {
				if (e.detail.value != null && e.detail.value.length > 0) {
					this.checked = true
				} else {
					this.checked = false
				}
			},
			// 查找推荐人 5.0
			async referrer_f5() {
				// 发送请求
				const {
					data: res
				} = await this.$myHttp5({
					url: 'v1/getReferrer',
					data: {
						type: 2,
						id: this.userid
					}
				});
				this.referrer = res.data.data.name
			},
			// 注册
			async register5() {
				var data = {}
				var typ = 1
				if (!this.is_bind) {
					if (this.merchant_name == '') {
						uni.showToast({
							title: '请输入商家名称',
							icon: "none"
						});
						return false
					}
					if (this.phone == '') {
						uni.showToast({
							title: '请输入商家手机号',
							icon: "none"
						});
						return false
					}
					if (this.districts == '') {
						uni.showToast({
							title: '请选择地区',
							icon: "none"
						});
						return false
					}
					if (this.address == '') {
						uni.showToast({
							title: '请输入详情地址',
							icon: "none"
						});
						return false
					}
					if (this.positive_file == '') {
						uni.showToast({
							title: '请上传身份证正面',
							icon: "none"
						});
						return false
					}
					if (this.reverse_file == '') {
						uni.showToast({
							title: '请上传身份证反面',
							icon: "none"
						});
						return false
					}
					if (this.license_file == '') {
						uni.showToast({
							title: '请上传营业执照',
							icon: "none"
						});
						return false
					}
					data = {
						names: this.merchant_name,
						phone: this.phone,
						mcode: this.equipment_number,
						typ: typ,
						openid: this.openid,
						userid: this.userid,
						province: this.data.province,
						city: this.data.city,
						district: this.data.district,
						address: this.address,
						merchant_id: this.merchant_id,
						card_front: this.positive_file,
						card_back: this.reverse_file,
						license: this.license_file,
						real_name: this.real_name,
						real_idcard: this.real_idcard
					}
				} else {
					typ = 2
					if (this.name == '') {
						uni.showToast({
							title: '请输入姓名',
							icon: "none"
						});
						return false
					}
					if (this.phone == '') {
						uni.showToast({
							title: '请输入手机号',
							icon: "none"
						});
						return false
					}
					if (this.districts == '') {
						uni.showToast({
							title: '请选择地区',
							icon: "none"
						});
						return false
					}
					if (this.address == '') {
						uni.showToast({
							title: '请输入详情地址',
							icon: "none"
						});
						return false
					}
					data = {
						names: this.name,
						phone: this.phone,
						mcode: this.equipment_number,
						typ: typ,
						openid: this.openid,
						userid: this.userid,
						province: this.data.province,
						city: this.data.city,
						district: this.data.district,
						address: this.address,
						merchant_id: this.merchant_id,
						product_id: this.product_id,
						type: this.type
					}
				}
				uni.showLoading({
					title: '加载中'
				});
				const {
					data: res
				} = await this.$myHttp5({
					url: 'Register/register',
					data: data
				});
				uni.hideLoading()
				if (res.code == 0) {
					uni.showToast({
						title: res.msg,
						duration: 2000,
						icon: "none"
					});
				} else {
					if (this.is_bind) {
						uni.setStorageSync('userType', 1);
						this.success_show = true
					} else {
						this.title = "恭喜您，设备绑定成功！"
						// uni.showToast({
						// 	title: '恭喜您，设备绑定成功！',
						// 	duration: 2000,
						// 	icon: "none"
						// });
						// uni.setStorageSync('userinfo', {});
						// uni.setStorageSync('userType', 2);
						// setTimeout(function() {
						// 	uni.navigateTo({
						// 		url: '/pages/merchant/index'
						// 	})
						// }, 1500)
						this.success_show = true
					}
				}
			},
			// 登录
			async _loginpwd5() {
				const {
					data: res
				} = await this.$myHttp5({
					url: 'Login/wx_openid_login',
					data: {
						openid: this.openid
					}
				});
				uni.hideLoading()
				this.loadding = false
				if (res.code == 1) {
					uni.setStorageSync('userType', res.data.userinfo.is_typs);
					uni.setStorageSync('userinfo', res.data.userinfo);
					uni.switchTab({
						url: '/pages/index/index'
					})
				} else {
					if (this.userid > 0) {
						this.referrer_f5()
					}
					this.getReceiveType()
					uni.setNavigationBarTitle({
						title: '免费申领'
					})
				}
			},
			// 获取收货类型
			async getReceiveType() {
				const {
					data: res
				} = await this.$myHttp5({
					url: 'V1/getReceiveType'
				});
				if (res.code == 1) {
					this.type_columns = [res.data]
				}
			},
			// 获取微信公众号信息
			async getWxConfigInfo() {
				const {
					data: res
				} = await this.$myHttp5({
					url: 'Wechats/getWxConfigInfo'
				});
				if (res.code == 1) {
					uni.setStorageSync('wxInfo', res.data);
					this.getCodes('')
				}
			},
			// 获取CODE
			getCodes(code) {
				if (code == '' || code == undefined) {
					this.wxInfo = uni.getStorageSync('wxInfo');
					const redirect_url = util.WEB_URL + '/pages/register/index?enumber=' + this.equipment_number +
						'&userid=' + this.userid;
					const url = 'https://open.weixin.qq.com/connect/oauth2/authorize?appid=' + this.wxInfo.AppID +
						'&redirect_uri=' + encodeURIComponent(redirect_url) +
						'&response_type=code&scope=snsapi_userinfo&state=STATE#wechat_redirect';
					window.location.href = url
				} else {
					this.getWxOpenId(code)
				}
			},
			// 获取微信OPENID
			async getWxOpenId(code) {
				const {
					data: res
				} = await this.$myHttp5({
					url: 'Wechats/getWxOpenId',
					data: {
						code: code
					}
				});
				if (res.code == 1) {
					if (res.data != null && res.data != '' && res.data != undefined) {
						this.openid = res.data
						uni.setStorageSync('openid', res.data);
					}
				}
			},
			// 合同
			contract() {
				this.checked = true
				this.show = false
			},
			// 获取合同内容
			async _getAgree5() {
				const {
					data: res
				} = await this.$myHttp5({
					url: 'v1/getContent'
				});
				if (res.code == 1) {
					this.regis = res.data
				}
			},
			// 打开地区选择器
			district() {
				this.addressShow = true
			},
			// 地区选择器初始化
			initCityData() {
				// 遍历城市js
				cityData.forEach((item1, index1) => {
					let temp2 = [];
					this.cityLevel1.push(item1.provinceName);
					let temp4 = [];
					let temp3 = [];
					// 遍历市
					item1.cities.forEach((item2, index2) => {
						temp2.push(item2.cityName);
						// 遍历区
						item2.counties.forEach((item3, index3) => {
							temp3.push(item3.countyName);
						})
						temp4[index2] = temp3;
						temp3 = [];
					})
					this.cityLevel3[index1] = temp4;
					this.cityLevel2[index1] = temp2;
				})
				// 选择器默认城市
				this.cityList.push(this.cityLevel1, this.cityLevel2[0], this.cityLevel3[0][0]);
			},
			// 选中时执行
			changeHandler(e) {
				const {
					columnIndex,
					index,
					indexs,
					value,
					values,
					// 微信小程序无法将picker实例传出来，只能通过ref操作
					picker = this.$refs.uPicker
				} = e;
				if (columnIndex === 0) { // 选择第一列数据时
					// 设置第二列关联数据
					picker.setColumnValues(1, this.cityLevel2[index]);
					// 设置第三列关联数据
					picker.setColumnValues(2, this.cityLevel3[index][columnIndex]);
				} else if (columnIndex === 1) { // 选择第二列数据时
					// 设置第三列关联数据
					picker.setColumnValues(2, this.cityLevel3[indexs[0]][index]);
				}
			},
			// 单击确认按钮时执行
			confirm(e) {
				// 输出数组 [省, 市, 区]
				this.districts = e.value.join("/")
				this.data.province = e.value[0]
				this.data.city = e.value[1]
				this.data.district = e.value[2]
				// 隐藏城市选择器
				this.addressShow = false;
			},
			// 获取产品
			async getProduct() {
				const {
					data: res
				} = await this.$myHttp5({
					url: 'v1/getProductList',
				});
				if (res.code == 1) {
					this.pro_columns = [res.data]
				}
			},
			// 点击选择产品
			product_click() {
				this.pro_show = true
			},
			// 点击选择邮寄方式
			type_click() {
				this.type_show = true
			},
			// 选择产品
			changeProduct(e) {
				this.pro_show = false
				if (this.product_id != e.value[0].id) {
					this.product_id = e.value[0].id
					this.product_name = e.value[0].name
				}
			},
			// 选择邮寄方式
			changeType(e) {
				this.type_show = false
				this.type = e.value[0].id
				this.type_name = e.value[0].name
			},
			// 确定关注公众号
			successConfirm() {
				this.success_show = false
				window.location.href = 'https://mp.weixin.qq.com/s/sZLxrY9LM6XhS0Y4B4SpbQ'
			},
			// 图片上传
			async uploadFile(index, base) {
				uni.showLoading({
					title: '上传中'
				});
				const {
					data: res
				} = await this.$myHttp5({
					url: 'common/uploadFile',
					data: {
						file: base
					}
				});
				uni.showToast({
					title: res.msg,
					duration: 1000,
					icon: 'none'
				});
				if (res.code == 1) {
					if (index == 1) {
						this.positive_file = res.data.url
						this.verifyIdcard(res.data.url)
					} else if (index == 2) {
						this.reverse_file = res.data.url
					} else if (index == 3) {
						this.license_file = res.data.url
					}
				}
			},
			//添加
			_positive(e) {
				let _this = this
				pathToBase64(e.file.url)
					.then(base64 => {
						_this.uploadFile(1, base64)
						_this.positive = [{
							url: e.file.url
						}]
						_this.nmb++
					})
					.catch(error => {
						console.error(error)
					})
			},
			//删除
			delete_positive(e) {
				this.positive = []
				this.positive_file = ''
				this.nmb--
			},
			//国徽
			_reverse(e) {
				let _this = this
				pathToBase64(e.file.url)
					.then(base64 => {
						_this.uploadFile(2, base64)
						_this.reverse = [{
							url: e.file.url
						}]
						_this.nmb++
					})
					.catch(error => {
						console.error(error)
					})
			},
			delete_reverse(e) {
				this.reverse = []
				this.reverse_file = ''
				this.nmb--
			},
			//国徽
			_license(e) {
				let _this = this
				pathToBase64(e.file.url)
					.then(base64 => {
						_this.uploadFile(3, base64)
						_this.license = [{
							url: e.file.url
						}]
						_this.nmb++
					})
					.catch(error => {
						console.error(error)
					})
			},
			delete_license(e) {
				this.license = []
				this.license_file = ''
				this.nmb--
			},
			// 获取身份证信息
			async verifyIdcard(url) {
				const {
					data: res
				} = await this.$myHttp5({
					url: 'Aliyuns/index',
					data: {
						url: url
					}
				});
				if (res.code == 1) {
					this.real_name = res.data.name
					this.real_idcard = res.data.idNumber
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	page {
		background-color: #f3f4f6;
	}

	.login_box {
		min-height: 100vh;
		padding: 70rpx;
		box-sizing: border-box;
		background-image: linear-gradient(#fff, #e7f6f4);

		.login_logo {
			text-align: center;
			padding-bottom: 50rpx;

			.login_img {
				width: 160rpx;
				height: 160rpx;
				margin: 0 auto;
				border-radius: 18rpx;
			}
		}

		.input_box {
			background-color: #fff;
			border-radius: 15rpx;
			width: 100%;
			display: flex;
			flex-direction: column;
			align-items: center;

			input {
				width: 90%;
				padding: 15rpx;
				height: 100rpx;
				box-sizing: border-box;
			}

			.input_tag {
				width: 90%;
				padding: 30rpx;
				display: flex;
				justify-content: flex-start;
				text-align: left;
				color: #c8c9cc;

				text {
					padding-left: 14rpx;
				}
			}

			.blacks {
				color: #303133;
			}
		}

		.certificate {
			background-color: #fff;
			margin-top: 30rpx;

			.title {
				font-size: 28rpx;
				padding: 20rpx;
			}

			.idcard {
				display: flex;
				justify-content: space-between;
				padding: 0 20rpx;
				padding-bottom: 20rpx;

				.lefts {
					width: 50%;
				}

				.rights {
					width: 50%;
				}
			}

			.idcards {
				padding-bottom: 20rpx;
			}

			.msgs {
				font-size: 24rpx;
				color: #fa3534;
				padding: 20rpx;
			}
		}

		.login_button {
			background-color: #2979ff;
			width: 100%;
			border-radius: 15rpx;
			font-size: 28rpx;
			padding: 30rpx;
			box-sizing: border-box;
			color: #fff;
			text-align: center;
			margin-top: 45rpx;
			transition: all 0.5s;
		}

		.login_button:active {
			background-color: #2979ff;
		}

		.label {
			margin-top: 30rpx;
			display: flex;
			align-items: center;
			font-size: 24rpx;
			color: #818181;

			text {
				color: #2b85e4;
				font-size: 30rpx;
			}
		}

		.Modal {
			position: absolute;
			top: 0;
			bottom: 0;
			left: 0;
			right: 0;
			background-color: rgba(255, 255, 255, 0);

			.Modal_tit {
				position: absolute;
				top: 20%;
				bottom: 20%;
				left: 5%;
				right: 5%;
				overflow: hidden;
				overflow-y: auto;
				background-color: rgba(255, 255, 255, 1);
				border-top-left-radius: 15rpx;
				border-top-right-radius: 15rpx;
				display: block;
				padding: 35rpx 20rpx;
				padding-bottom: 0;

				h3 {
					text-align: center;
					margin-bottom: 30rpx;
				}

				p {
					padding: 20rpx 0;
				}
			}

			.Modal_cf {
				height: 80rpx;
				background-color: #fff;
				left: 5%;
				right: 5%;
				position: absolute;
				bottom: calc(20% - 80rpx);
				border-bottom-left-radius: 15rpx;
				border-bottom-right-radius: 15rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				border-top: #dddddf 1px solid;
			}
		}

		.tc {
			width: 80%;
			margin: 0 auto;
			margin-top: 20%;

			.tc-main {
				background-color: #fff;
				border-radius: 20rpx;
				padding: 30rpx;

				.top {
					padding-top: 20rpx;
					display: flex;
					justify-content: space-between;

					.lefts {
						width: 30%;
						text-align: center;

						image {
							width: 120rpx;
							height: 120rpx;
							border-radius: 50%;
						}
					}

					.rights {
						width: 70%;
						padding: 0 20rpx;

						.titles {
							padding-top: 20rpx;
							font-size: 30rpx;
							font-weight: bold;
						}

						.msg {
							padding-top: 10rpx;
							font-size: 26rpx;
							color: #909399;
						}
					}
				}

				.content {
					padding: 30rpx 0;
					text-align: center;

					image {
						width: 500rpx;
						height: 500rpx;
					}
				}

				.bottom {
					text-align: center;
					color: #818181;
					padding-bottom: 30rpx;
				}
			}
		}
	}
</style>